<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>景点详情 - 旅行系统</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .scenic-banner {
            height: 400px;
            background: #f5f5f5 center/cover no-repeat;
            border-radius: 8px;
            margin-bottom: 20px;
            position: relative;
        }
        .section-card {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            transition: box-shadow 0.3s;
        }
        .section-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .empty-tip {
            color: #999;
            font-style: italic;
        }
        .info-tag {
            display: inline-block;
            background: #e8f4fd;
            color: #198754;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8em;
            margin-right: 8px;
        }
        .ticket-button {
            background-color: #28a745;
            border-color: #28a745;
            transition: all 0.3s ease;
        }
        .ticket-button:hover {
            background-color: #218838;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
        }
        .ticket-price {
            font-size: 0.9em;
            color: #fff;
            margin-left: 5px;
            font-weight: 500;
        }
    </style>
</head>
<body class="container py-4">
<!-- 景点 banner + 基本信息 -->
<div class="scenic-banner" id="scenicBanner"></div>
<div class="row align-items-center mb-4">
    <div class="col-md-8">
        <h1 class="fs-1 fw-bold" id="scenicName">加载中...</h1>
        <p class="text-muted mb-2" id="scenicCity">加载中...</p>
    </div>
    <div class="col-md-4 text-end">
        <!-- 新增购买门票按钮 -->
        <button class="btn ticket-button me-2" onclick="buyTickets()">
            <i class="fa fa-ticket"></i> 购买门票
            <span class="ticket-price">¥60起</span>
        </button>
        <button class="btn btn-primary me-2">
            <i class="fa fa-heart-o"></i> 收藏
        </button>
        <button class="btn btn-secondary">
            <i class="fa fa-share-alt"></i> 分享
        </button>
    </div>
</div>

<!-- 历史背景板块 -->
<div class="section-card">
    <h2 class="fs-2 mb-3">历史背景</h2>
    <p id="historyBackground" class="text-muted">
        <span class="empty-tip">暂无历史背景信息</span>
    </p>
</div>

<!-- 文化特色板块 -->
<div class="section-card">
    <h2 class="fs-2 mb-3">文化特色</h2>
    <p id="culFeatures" class="text-muted">
        <span class="empty-tip">暂无文化特色信息</span>
    </p>
</div>

<!-- 特色特产板块 -->
<div class="section-card">
    <h2 class="fs-2 mb-3">特色特产</h2>
    <div id="specialty" class="text-muted">
        <span class="empty-tip">暂无特色特产信息</span>
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    let previewData = {};
    let previewDatas = [];
    $(document).ready(function () {
        const urlParams = new URLSearchParams(window.location.search);
        var sight_id = urlParams.get("sight_id");
        var url = "/tourismsystem/selectById.detail";
        var param = {
            sight_id: sight_id,
        };
        selectDetail(url, param);
    })

    function selectDetail(url, param) {
        $.post(url, param, function (data) {
            var jsonObj = JSON.parse(data);
            previewDatas.splice(0, previewDatas.length);
            previewDatas = [jsonObj];
            renderPreviewData(previewDatas[0]);
        })
    }
    // 4. 核心渲染函数（处理所有字段缺失）
    function renderPreviewData(data) {
        if (!data) {
            console.error("无有效数据");
            return;
        }

        // 1. 背景图
        const scenicBanner = document.getElementById('scenicBanner');
        if (scenicBanner) {
            scenicBanner.style.backgroundImage = data.img_path
                ? `url("${data.img_path}")` // 给动态URL加引号，避免特殊字符解析错误
                : "url('default-banner.jpg')"; // 默认图保持原有格式
        }

        // 2. 景点名称（用sightName替换sight_name）
        const scenicName = document.getElementById('scenicName');
        if (scenicName) {
            scenicName.innerText = data.sightName || "未知景点";
        }

        // 3. 所在城市（city字段匹配，无需修改）
        const scenicCity = document.getElementById('scenicCity');
        if (scenicCity) {
            scenicCity.innerText = `所在城市：${data.city || "未知城市"}`;
        }


        // 4. 门票价格（若后端有ticketPrice字段，用ticketPrice替换ticket_price）
        const ticketPrice = document.querySelector('.ticket-price');
        if (ticketPrice) {
            ticketPrice.innerText = `¥${data.ticketPrice ?? "0"}起`;
        }

        // 5. 历史背景（用historyBackground替换history_background）
        const historyBackground = document.getElementById('historyBackground');
        if (historyBackground) {
            historyBackground.innerText = data.historyBackground || "暂无历史背景信息";
            historyBackground.querySelector('.empty-tip')?.remove();
        }

        // 6. 文化特色（用culFeatures替换cul_features）
        renderField('culFeatures', data.culFeatures);

        // 7. 特色特产（specialty字段匹配，无需修改）
        const specialtyEl = document.getElementById('specialty');
        if (specialtyEl) {
            const content = (data.specialty || '').trim();
            specialtyEl.innerHTML = content || "暂无特色特产信息";
            specialtyEl.querySelector('.empty-tip')?.remove();
        }
        // 保存数据（用sightId替换sight_id）
        previewData = { ...data, sight_id: data.sightId }; // 兼容购票功能的sight_id
    }

    // 同步修改renderField（无需改字段名，仅处理元素）
    function renderField(elementId, content) {
        const el = document.getElementById(elementId);
        if (!el) return;
        el.innerText = content || "暂无相关信息";
        el.querySelector('.empty-tip')?.remove();
    }
</script>
</body>
</html>
